<script setup>
import {
Present,
Reading,
User
} from '@element-plus/icons-vue';
import { RouterView } from 'vue-router';
</script>

<template>
  <el-container class="layout-container">
    <el-container>
      <el-header>书店后台管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="/customers"
            class="el-menu-vertical"
            :router="true"
            background-color="#EDF5FF"
            text-color="#2C3E50"
            active-text-color="#409EFF"
          >
            <el-menu-item index="/customers">
              <el-icon><User /></el-icon>
              <span>客户管理</span>
            </el-menu-item>
            <el-menu-item index="/books">
              <el-icon><Reading /></el-icon>
              <span>图书管理</span>
            </el-menu-item>
            <el-menu-item index="/products">
              <el-icon><Present /></el-icon>
              <span>文创产品</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
}

.el-header {
  background-color: #409EFF;
  color: white;
  line-height: 60px;
  font-size: 20px;
  font-weight: bold;
  padding: 0 20px;
  height: 60px !important;
}

.el-aside {
  background-color: #EDF5FF;
  border-right: 1px solid #E6E6E6;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.el-menu {
  border-right: none;
  height: 100%;
}

.el-menu-vertical .el-menu-item {
  border-left: 3px solid transparent;
}

.el-menu-vertical .el-menu-item:hover {
  background-color: #E3EFFF !important;
  border-left: 3px solid #A3CFFF;
}

.el-menu-vertical .el-menu-item.is-active {
  background-color: #E3EFFF !important;
  border-left: 3px solid #409EFF;
  color: #409EFF;
}

.el-main {
  padding: 20px;
  background-color: #F5F7FA;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #C0C4CC;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #F5F7FA;
}
</style>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
</style>
